<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title><br />
<style type="text/css">
.layer1{width:100%;height:100px;background:red;}
      .layer1-1{width:45%;height:100px;background: #0F0;float:left;}
	  .layer1-2{width:55%;height:100px;background:#C63;float:left;}
	  .layer1-3{clear:both;} 
.layer2{width:100%;height:400px;background:yellow;}
      .layer2-1{width:100%;height:200px;background:yellow;}
	  .layer2-2{width:100%;height:200px;background:#F96;}
	          .layer2-2-1{width:30%;height:180px;background:#CFF;padding:0 0.5% 0 0;margin:1.5%;float:left;}
			              h3{font-size:16px;text-align:center;background:#03F}
			  .layer2-2-1 p{font-size:9px;text-align:center;}
			  .layer2-2-2{width:30%;height:180px;background:#CFF;margin:1.5%;float:left;}
			  .layer2-2-3{width:30%;height:180px;background:#CFF;margin:1.5%;float:left;}
			  .layer2-2-4{clear:both;}
.layer3{width:100%;height:100px;background:blue;}
</style>
</head>

<body>
<div class="layer1">
      <div class="layer1-1"><h1>山东商业职业技术学院</h1></div>
      <div class="layer1-2"><h2>学校概况  机构设置  教育教学  就业创业  科技服务</h2></div>
      <div class="layer1-3"></div>
</div>
<div class="layer2">
      <div class="layer2-1"><img src="01.jpg" alt="校园图片" /></div>
      <div class="layer2-2">
           <div class="layer2-2-1"><h3>学校要闻</h3>
           <p>新闻一</p>
           <p>新闻二</p>
           <p>新闻三</p>
           </div>
           <div class="layer2-2-2"><h3>通知公告</h3>
           <p>新闻一</p>
           <p>新闻二</p>
           <p>新闻三</p>
           </div>
           <div class="layer2-2-3"><h3>媒体报道</h3>
           <p>新闻一</p>
           <p>新闻二</p>
           <p>新闻三</p>
           </div>
           <div class="layer2-2-4"></div>
      </div>
</div>
<div class="layer3"></div>
</body>
</html>
